<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <header>
    <div class="top flex">
      <div class="wrapper">
        <ul class="links flex">
          <li><a href="">小米网</a></li>
          <li><a href="">MIUI</a></li>
          <li><a href="">米聊</a></li>
          <li><a href="">游戏</a></li>
          <li><a href="">多看阅读</a></li>
          <li><a href="">云服务</a></li>
          <li><a href="">小米网移动版</a></li>
        </ul>
        <ul class="login flex">
          <li><a href="">登录</a></li>
          <li><a href="">注册</a></li>
        </ul>
      </div>
    </div>
    <nav class="wrapper">
      <div class="logo"><a href=""><img src="./images/logo.png" alt=""></a></div>
      <ul class="flex">
        <li><a href="">首页</a></li>
        <li class="toggle">
          <a href="">理财</a>
          <ul class="sub-nav">
            <li><a href="">定期理财</a></li>
            <li><a href="">基金投资</a></li>
          </ul>
        </li>
        <li><a href="">贷款</a></li>
        <li><a href="">资产</a></li>
        <li><a href="">社区</a></li>
        <li><a href="">客户端</a></li>
      </ul>
    </nav>
  </header>

  <div id="banner">
    <h2>小米用科技畅想金融</h2>
    <button>下载小米金融APP</button>
  </div>

  <main class="wrapper">
    <ul class="flex-evenly box">
      <li class="item">
        <div class="bg">
          <h4>1111</h4>
          <h4>1111</h4>
        </div>
        <ul>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
        </ul>
        <p>了解更多 &gt;</p>
      </li>
      <li class="item">
        <div class="bg">
          <h4>1111</h4>
          <h4>1111</h4>
        </div>
        <ul>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
        </ul>
        <p>了解更多 &gt;</p>
      </li>
      <li class="item">
        <div class="bg">
          <h4>1111</h4>
          <h4>1111</h4>
        </div>
        <ul>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
          <li><a class="mi" href="">小米官方</a> | <a href="">米家综合理财平台</a></li>
        </ul>
        <p>了解更多 &gt;</p>
      </li>
    </ul>
  </main>

  <footer>
 
  </footer>




</body>

</html>